import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	Image, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';
import MethodUtil from '../../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;

export class ListItem extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		const { btnPress, navigation, data, choice } = this.props;
		const { overdueId, orderId, companyName, companyId, staffIdName, isOverdueName, overdueAmount, overdueDay,
			sourceDate, overdueDate, overdueStatus, checkDay, nextCheckTime, modify, bizTeamName, organName } = data || {};
		return (
			<TouchableOpacity activeOpacity={0.5} style={styles.listBox} onPress={() => {
				navigation.navigate('JudgementDetailsPage', { overdueId, choice });
			}}>
				<View style={styles.listHead}>
					<View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 12 * scale }}>
						<Text style={styles.title}>{orderId || '-'}</Text>
						{overdueStatus === '0' ? <Text style={styles.btnRed}>{nextCheckTime && nextCheckTime.substring(0, 10) || '-'} 重新计算</Text> : null}
						<Text style={styles.btn}>{(isOverdueName || '') + (overdueStatus === '0' ? (' | ' + checkDay + '天') : '')}</Text>
					</View>
					<Text style={styles.info}>{companyName || '-'}丨{staffIdName || '-'}</Text>
				</View>
				<View style={styles.timeBock}>
					<View style={styles.timeBox}>
						<Text style={styles.timeHead}>占用日期</Text>
						<Text style={styles.timeDown}>{sourceDate && sourceDate.substring(0, 10) || '-'}</Text>
					</View>
					<View style={styles.timeBox}>
						<Text style={styles.timeHead}>到期日</Text>
						<Text style={styles.timeDown}>{sourceDate && overdueDate.substring(0, 10) || '-'}</Text>
					</View>
					<View style={styles.timeBox}>
						<Text style={styles.timeHead}>逾期天数</Text>
						<Text style={styles.timeDown}>{overdueDay || '-'}</Text>
					</View>
				</View>
				<View style={styles.timeBock}>
					<View style={{ flex: 1 }}>
						<Text style={styles.timeHead}>逾期金额</Text>
						<Text style={styles.timeDown}>￥{MethodUtil.toThousands(overdueAmount, 2) || '-'}</Text>
					</View>
				</View>
				<View style={styles.timeBock}>
					<View style={{ flex: 1 }}>
						<Text style={styles.timeHead}>业务员</Text>
						<Text style={[styles.timeHead, styles.flexBrancheVaule]}>{staffIdName || '--'} | {bizTeamName || '--'} | {organName || '--'}
						</Text>
					</View>
				</View>
				{
					modify ?
						<View style={styles.btnContainer}>
							<TouchableOpacity style={[styles.actionBtn, { backgroundColor: overdueStatus !== '1' ? '#cee5ff' : style.color.themeColor }]}
								onPress={() => {
									btnPress({ overdueStatus: overdueStatus !== '1' ? '1' : '0', overdueId, checkDay, companyId, overdueDay }); 	//已逾期->可操作延期、关闭 已延期->可操作逾期、关闭 已关闭->可操作逾期
								}}>
								<Text style={[styles.actionBtnText, { color: overdueStatus !== '1' ? style.color.themeColor : '#fff' }]}>
									{overdueStatus !== '1' ? '逾期' : '延期'}
								</Text>
							</TouchableOpacity>
							{
								overdueStatus !== '2' ?
									<TouchableOpacity style={styles.closeBtn} onPress={() => {
										btnPress({ overdueStatus: '2', overdueId, checkDay, companyId, overdueDay });
									}}>
										<Text style={styles.closeText}>关闭</Text>
									</TouchableOpacity> : null
							}
						</View>
						: null
				}
			</TouchableOpacity >
		)
	}
}
const styles = StyleSheet.create({
	listBox: {
		width: 351 * scale,
		backgroundColor: style.color.white,
		borderRadius: 6 * scale,
		marginBottom: 18 * scale,
	},
	listHead: {
		height: 65 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		marginBottom: 18 * scale,
		flexDirection: 'column',
		justifyContent: 'center'
	},
	title: {
		flex: 1,
		fontSize: 13 * scale,
		color: style.color.atrous,
		paddingLeft: 12 * scale
	},
	info: {
		paddingLeft: 12 * scale,
		fontSize: 12 * scale,
		color: '#848A96',
		marginTop: 4 * scale
	},
	btn: {
		color: '#0E7FFD',
		fontSize: 14 * scale,
		fontWeight: 'bold'
	},
	timeBock: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingBottom: 20 * scale,
	},
	timeBox: {
		width: 90 * scale
	},
	timeHead: {
		fontSize: 12 * scale,
		color: style.color.atrous,
	},
	flexBrancheVaule: {
		marginTop: 4 * scale,
	},
	timeDown: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		marginTop: 4 * scale
	},
	btnContainer: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'flex-end',
		marginBottom: 18 * scale,
		marginRight: 12 * scale,
	},
	btnRed: {
		textAlign: 'right',
		fontSize: 10 * scale,
		color: '#D0021B',
		paddingRight: 4 * scale
	},
	actionBtn: {
		backgroundColor: style.color.themeColor,
		borderRadius: 6 * scale,
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		marginRight: 8 * scale,
	},
	actionBtnText: {
		color: '#fff',
		fontSize: 12 * scale,
		fontWeight: '600'
	},
	closeBtn: {
		borderRadius: 6 * scale,
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		borderColor: style.color.themeColor,
		borderWidth: 1
	},
	closeText: {
		color: style.color.themeColor,
		fontSize: 12 * scale,
		fontWeight: '600'
	},
})